<template>
	<view class="content">
		<!-- 搜索框 -->
		<uni-search-bar @focus="go">
		</uni-search-bar>
		<!-- 使用轮播图组件 -->
		<myswiper :swiperArr='swiperArr'></myswiper>
		<!-- 导航部分 -->
		<navbar></navbar>
		<!-- 引入更多组件 -->
		<morebar title='推荐产品' url='../../pages/product/product'></morebar>
		<!-- 引入列表组件 -->
		<listitem :recommendArr='recommendArr'></listitem>
		<!-- 引入更多组件 -->
		<morebar title='媒体报道' url='../../pages/news/news'></morebar>
		<!-- 媒体报道数据列表展示 -->
		<view class="newslist">
			<view class="news-item" v-for="item in newsArr" :key="item.id">
				<view class="news_left">
					<image class="news_img" :src="item.litpic" mode="widthFix"></image>
				</view>
				<view class="news_right">
					<view class="news_title">
						{{item.title}}
					</view>
					<view class="news_desc">
						{{item.seo_description}}
					</view>
					<view class="news_date">
						{{item.add_time}}
					</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	// 引入轮播图组件
	import myswiper from '../../components/myswiper/myswiper.vue'
	// 引入导航组件
	import navbar from '../../components/navbar/navbar.vue';
	import listitem from '../../components/listitem/listitem.vue'
	// 引入 morebar 组件
	import morebar from '../../components/morebar/morebar.vue'
	//导入接口
	import {
		getIndexData
	} from '../../api/index.js'

	export default {
		data() {
			return {
				title: 'Hello',
				swiperArr: [], // 轮播图数组
				recommendArr: [], // 推荐数据
				newsArr: [] // 媒体报道数组
			}
		},
		components: {
			myswiper,
			navbar,
			listitem,
			morebar
		},
		onLoad() {
			// 请求首页的数据
			getIndexData({
				apiAdv_1: "ekey=1&pid=3",
				apiArclist_1: "ekey=1&channel=2&limit=4&flag=c",
				apiArclist_2: "ekey=2&typeid=12&limit=3",
				apiArclist_3: "ekey=3&typeid=4&limit=4",
				apiGlobal: "ekey=1",
				apiType_1: "ekey=1&typeid=8&addfields=content&infolen=140&suffix=false",
				apikey_token: "e954d2eb0f46dbcdc48600ddbb13807e-1673509768",
				appId: "wxa5bb9ad4aa141ba8",
				token: "",
				_ajax: 1
			}).then(res => {
				console.log('res', res)
				this.swiperArr = res.data.apiAdv['1'].data
				this.recommendArr = res.data.apiArclist['1'].data
				this.newsArr = res.data.apiArclist['2'].data
			})
		},
		methods: {
			go() {
				// 跳转页面
				uni.navigateTo({
					url: '../search/search'
				})
			}
		}
	}
</script>

<style lang="less">
	.search-result {
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		text-align: center;
	}

	.search-result-text {
		text-align: center;
		font-size: 28rpx;
		color: #666;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 0rpx;
	}

	.uni-mt-10 {
		margin-top: 20rpx;
	}

	/* 新闻列表 */
	.newslist {
		width: 100%;

		.news-item {
			width: 100%;
			padding: 30rpx 0;
			display: flex;

			.news_left {
				width: 220rpx;

				.news_img {
					width: 100%;
				}
			}

			;

			.news_right {
				flex: 1;
				display: flex;
				flex-direction: column;

				.news_title {
					width: 440rpx;
					font-size: 34rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.news_desc {
					width: 440rpx;
					font-size: 24rpx;
				    overflow:hidden;
				   text-overflow:ellipsis;
				   display: -webkit-box;
				  -webkit-line-clamp: 2;
				  -webkit-box-orient: vertical; 

				}
			}
		}
	}
</style>
